<script>
import {quillEditor} from 'vue-quill-editor'

export default {
  name: "Creation",
  components: {
    quillEditor
  },
  data() {
    return {
      editorOption: {
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'],// 加粗，斜体，下划线，删除线
              ['blockquote'],// 引用
              [{'header': 1}, {'header': 2}],// 标题，键值对的形式；1、2表示字体大小
              [{'list': 'ordered'}, {'list': 'bullet'}],//列表
              [{'indent': '-1'}, {'indent': '+1'}],// 缩进
              [{'direction': 'rtl'}],// 文本方向
              [{'size': ['small', false, 'large', 'huge']}],// 字体大小
              [{'header': [1, 2, 3, 4, 5, 6, false]}],//几级标题
              [{'color': []}, {'background': []}],// 字体颜色，字体背景颜色
              [{'align': []}],//对齐方式
              ['clean'],//清除字体样式
              ['image']//上传图片
            ]
          }
        }
      },
      form: {
        blogTitle: '',
        blogContent: '',
        enableComment: true,
        payContext: '',
        isShowLiked: false,
        isShowUnliked: false
      }
    }
  },
  methods: {
    aritcle() {
      this.$router.push('/article')
    },
    save() {

    }
  }
}
</script>

<template>
  <div class="creation">
    <el-button class="aritcle" type="primary" @click="aritcle">返回文章列表</el-button>
    <el-form ref="form" :model="form" label-width="auto">
      <el-form-item label="博客标题" prop="blogTitle">
        <el-input v-model="form.blogTitle" placeholder="请输入博客标题"/>
      </el-form-item>
      <el-form-item label="博客内容" prop="blogTitle">
        <quill-editor class="ql-editor"
                      style="width: 800px;" :options="editorOption"
                      v-model="form.blogContent"></quill-editor>
      </el-form-item>
      <el-form-item label="付费内容" prop="payContext">
        <el-input v-model="form.payContext" placeholder="请输入付费内容"/>
      </el-form-item>

      <div class="like">
        <el-form-item class="isShowLiked" label="是否评论" prop="enableComment">
          <el-switch
              v-model="form.enableComment"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
        <el-form-item class="isShowLiked" label="是否显示点赞数" prop="isShowLiked">
          <el-switch
              v-model="form.isShowLiked"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
        <el-form-item class="isShowLiked" label="是否显示点踩数" prop="isShowUnliked">
          <el-switch
              v-model="form.isShowUnliked"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
      </div>
      <el-button class="save" type="primary" @click="save">保存</el-button>
    </el-form>
  </div>
</template>

<style scoped lang="less">
.creation {
  margin: 50px auto;
  .save {
    margin-left: 40px;
  }
  .aritcle {
    margin-bottom: 20px;
    margin-left: 40px;
    margin-top: 0;
  }
}



.ql-editor {
  padding: 0px 0px;
  white-space: normal;
  height: 300px;
}

.ql-container {
  height: 400px;
}

.like {
  display: flex;
  .isShowLiked {
    width: 200px;
  }
}
</style>
